<template>
  <div class="box">
    <div class="set_box">
      <input
        type="text"
        id="newtodo"
        v-model="todoTitle"
        @keyup.enter="send"
        placeholder="请输入内容"
      />
      <van-button id="btnAdd" type="primary" size="mini" @click="send"
        >新增任务</van-button
      >

      <van-tabs>
        <van-tab
          v-for="(item, index) in tabList"
          :title="item.title"
          :key="index"
          :badge="item.badge"
        >
          <items
            :mainTitle="item.title"
            :datalist="item.datalist"
            :todoLists="item.todoLists"
          ></items>
        </van-tab>
      </van-tabs>
      <a href="javascript:void(0)" id="delAll" @click="delAll">全部删除</a>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  computed,
  onMounted,
  reactive,
  watch,
  defineProps,
  getCurrentInstance,
} from "vue";
import getData from "./data";
import toDoFunc from "./operation";
import items from "./components/items.vue";
let { proxy } = getCurrentInstance();
//import getTodoLists from './watchtodolist';

//const { todoLists }= getTodoLists()
//  const todoTitle = ref('')

const { todoLists, todoTitle, tabList, gettolist } = getData();
const { addTodo, delAll, delTodo } = toDoFunc(todoLists, todoTitle);
const send = () => {
  if (todoTitle.value == "") return;
  //重新调用请求数据

  let data = addTodo();
  proxy
    .$http({
      method: "post",
      url: "/send",
      data,
    })
    .then((res) => {
      console.log(res)
      proxy.$toast.success(res.data.msg);
    })
    .catch((err) => {
      console.log(err);
    });
  gettolist();
};
</script>

<style scoped>
.box {
  width: 100%;
}
.set_box {
  border: 1px solid #eee;
  width: 50%;
  margin: auto;
}
a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #f40;
}
a.active {
  color: #f40;
}
input {
  position: relative;
  top: 4px;
  margin-left: 20px;
}
.van-button {
  margin-left: 10px;
}
#newtodo {
  width: 280px;
  border: 1px solid #ddd;
  color: #ddd;
}
#newtodo:focus {
  border: 1px solid #6fb1f9;
}
#btnAdd {
  background-color: #6fb1f9;
  border: 0px;
}
#delAll {
  color: #fff;
  display: block;
  font-size: 14px;
  width: 100px;
  height: 40px;
  margin-top: 30px;
  margin: 50px auto;
  text-align: center;
  line-height: 40px;
  background-color: #6fb1f9;
  border-radius: 10px;
}
</style>
